<script setup>
import { ref, computed } from 'vue'

const RValue = ref(0)
const GValue = ref(0)
const BValue = ref(0)
const fontThreshold = ref(0.5)
const borderThreshold = ref(0.8)

const RComouted = computed(() => {
    return RValue.value * 0.2126
})

const GComouted = computed(() => {
    return GValue.value * 0.7152
})

const BComouted = computed(() => {
    return BValue.value * 0.0722
})

const lightness = computed(() => {
    return (RComouted.value + GComouted.value + BComouted.value) / 255
})

const fontColorLight = computed(() => {
    return `${ (lightness.value - fontThreshold.value) * -999999 }%`
})

const borderAlpha = computed(() => {
    return (lightness.value - borderThreshold.value) * 100
})

const borderColorR = computed(() => {
    return RValue.value - 50
})

const borderColorG = computed(() => {
    return GValue.value - 50
})

const borderColorB = computed(() => {
    return BValue.value - 50
})
</script>

<template>
    <div class="wrapper">
        <div class="auto-container">根据背景色自适应字体颜色</div>

        <div class="slider-demo-block">
            <span class="demonstration">R</span>
            <el-slider v-model="RValue" :max="255" :min="0" :step="1" />
            <span>{{ RValue }}</span>
        </div>

        <div class="slider-demo-block">
            <span class="demonstration">G</span>
            <el-slider v-model="GValue" :max="255" :min="0" :step="1" />
            <span>{{ GValue }}</span>
        </div>

        <div class="slider-demo-block">
            <span class="demonstration">B</span>
            <el-slider v-model="BValue" :max="255" :min="0" :step="1" />
            <span>{{ BValue }}</span>
        </div>

        <div class="slider-demo-block">
            <span class="demonstration">font-threshold</span>
            <el-slider v-model="fontThreshold" :max="1" :min="0" :step="0.1" />
            <span>{{ fontThreshold }}</span>
        </div>

        <div class="slider-demo-block">
            <span class="demonstration">border-threshold</span>
            <el-slider v-model="borderThreshold" :max="1" :min="0" :step="0.1" />
            <span>{{ borderThreshold }}</span>
        </div>
    </div>
</template>

<style scoped>
.wrapper {
    padding: 8px;
}

.auto-container {
    padding: 10px;
    border: 4px solid;

    background: rgb(v-bind(RValue), v-bind(GValue), v-bind(BValue));
    border-color: rgba(v-bind(borderColorR), v-bind(borderColorG), v-bind(borderColorB), v-bind(borderAlpha));
    color: hsl(0, 0%, v-bind(fontColorLight));
}

.slider-demo-block {
    max-width: 510px;
    display: flex;
    align-items: center;
}
.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 20px;
    margin-right: 20px;
}
.slider-demo-block .demonstration {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    line-height: 44px;
    margin-bottom: 0;
    white-space: nowrap;
}
</style>